<template>
  <el-card>
    <div class="btn">
      <el-card class="search-condition-card">
        <el-form v-model="searchForm" ref="searchFormRef" label-width="4vw">
          <!-- 这里可以根据实际需求添加各种搜索条件输入框，以下只是示例 -->
          <el-form-item label="姓名">
            <el-input
              v-model.trim="searchForm.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="searchForm.gender" placeholder="请选择性别">
              <el-option label="请选择性别" value=""></el-option>
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-button type="primary" @click="(dialogVisible = true), (isAdd = true)"
        ><i class="el-icon-plus"></i> 新增</el-button
      >
      <el-button
        type="success"
        @click="handleUser"
        :disabled="
          multipleSelection.length == 0 || multipleSelection.length > 1
        "
        ><i class="el-icon-edit"></i> 修改</el-button
      >
      <el-button
        type="danger"
        :disabled="multipleSelection.length == 0"
        @click="deleteUser"
        ><i class="el-icon-delete"></i> 删除</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="50" label="编号"> </el-table-column>
      <el-table-column prop="name" label="用户名"> </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{ scope.row.gender ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column prop="class1" label="班级"> </el-table-column>
      <el-table-column prop="studentNumber" label="学号"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column label="注册时间">
        <template slot-scope="scope">
          {{scope.row.createTime.replace('T',' ')}}
        </template>
      </el-table-column>
      <el-table-column label="管理员权限">
        <template slot-scope="scope">
          <el-Button
            v-if="scope.row.jurisdiction"
            type="info"
            @click="changeAdministrator(scope.row.id, 0)"
            >取消管理员</el-Button
          >
          <el-button
            v-else
            el-Button
            type="primary"
            @click="changeAdministrator(scope.row.id, 1)"
            >添加管理员</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增志愿者"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            placeholder="默认密码：666666"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.gender" :label="1">男</el-radio>
          <el-radio v-model="form.gender" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="班级" prop="class1">
          <el-input v-model="form.class1"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="studentNumber">
          <el-input v-model="form.studentNumber"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        是否添加管理员
        <el-switch
          style="margin-left: 1vw"
          v-model="form.jurisdiction"
          active-color="#409eff"
          inactive-color="#ccc"
        >
        </el-switch>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改志愿者"
      :visible.sync="dialogVisible2"
      width="70%"
      :before-close="handleClose"
    >
      <el-form :model="changeForm" :rules="rules" ref="changeForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="changeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="changeForm.password"
            placeholder="默认密码：666666"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="changeForm.gender" :label="1">男</el-radio>
          <el-radio v-model="changeForm.gender" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="班级" prop="class1">
          <el-input v-model="changeForm.class1"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="studentNumber">
          <el-input v-model="changeForm.studentNumber"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="changeForm.phone"></el-input>
        </el-form-item>
        是否添加管理员
        <el-switch
          style="margin-left: 1vw"
          v-model="changeForm.jurisdiction"
          active-color="#409eff"
          inactive-color="#ccc"
        >
        </el-switch>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="changeUser()">确 定</el-button>
      </span>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import {
  addUser,
  changeUser,
  changeUserJurisdiction,
  deleteUser,
  getUser
} from '@/api/user'
import { GMTToStr } from '@/utils/GMTToStr'

export default {
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      dialogVisible2: false,
      form: {
        name: '',
        password: '',
        gender: 1,
        class1: '',
        studentNumber: '',
        phone: '',
        jurisdiction: false
      },
      changeForm: {
        id: '',
        name: '',
        password: '',
        gender: '1',
        class1: '',
        studentNumber: '',
        phone: '',
        jurisdiction: 1
      },
      isAdd: true,
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: false, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 18,
            message: '长度在 6 到 18 个字符',
            trigger: 'blur'
          }
        ],
        class1: [{ required: true, message: '请输入班级', trigger: 'blur' }],
        studentNumber: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 10, max: 10, message: '长度在 10 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
        ]
      },
      page: 1,
      pageSize: 10,
      currentPage4: 1,
      total: 1,
      searchForm: {
        name: '',
        gender: '',
        begin: '',
        end: ''
      },
      dateRange: ''
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    getUser () {
      getUser(this.page, this.pageSize, this.searchForm.name, this.searchForm.gender, this.searchForm.begin, this.searchForm.end)
        .then((data) => {
          console.log(data)
          this.tableData = data.data.rows
          this.total = data.data.total
        })
        .catch((data) => {
          console.log(data)
        })
    },
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val
    },
    handleClose () {
      this.$confirm('关闭对话框，新增内容将消失', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.isAdd) {
            this.form.name = ''
            this.form.password = ''
            this.form.gender = ''
            this.form.class1 = ''
            this.form.studentNumber = ''
            this.form.phone = ''
            this.form.jurisdiction = ''
            this.dialogVisible = false
          } else {
            this.dialogVisible2 = false
          }
        })
        .catch(() => {})
    },
    addUser () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addUser(this.form).then((data) => {
            if (data.code === 1) {
              this.dialogVisible = false
              this.getUser()
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.form.name = ''
              this.form.password = ''
              this.form.gender = ''
              this.form.class1 = ''
              this.form.studentNumber = ''
              this.form.phone = ''
              this.form.jurisdiction = ''
              this.dialogVisible = false
            } else {
              this.$message.error('用户名重复')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleUser () {
      this.changeForm = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      this.dialogVisible2 = true
      this.isAdd = false
    },
    changeUser () {
      this.$refs.changeForm.validate((valid) => {
        if (valid) {
          changeUser(this.changeForm).then((data) => {
            if (data.code === 0) {
              this.$message.error('用户名重复')
            } else {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogVisible2 = false
              this.getUser()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    deleteUser () {
      const idList = this.multipleSelection.map((data) => {
        return data.id
      })
      deleteUser(idList).then((data) => {
        if (data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getUser()
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getUser()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getUser()
    },
    changeAdministrator (id, res) {
      changeUserJurisdiction(id, res).then((data) => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.getUser()
      })
    },
    handleSearch () {
      // 在这里可以进行搜索逻辑处理，比如发送请求等
      // 此处先简单打印出搜索条件表单数据示例
      if (this.dateRange !== '' && this.dateRange !== null) {
        const timeArr = []
        // this.dateRange是获取到的组件选择的时间区间，获取方法这里就不说了
        for (let i = 0; i < this.dateRange.length; i++) {
          timeArr.push(GMTToStr(this.dateRange[i]))
        }
        this.searchForm.begin = timeArr[0]
        this.searchForm.end = timeArr[1]
      }
      this.getUser()
      this.searchForm.begin = ''
      this.searchForm.end = ''
    }
  }
}
</script>

<style scoped>
.el-form > .el-form-item {
  width: 25vw;
  margin-right: 8vw;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
}

.search-condition-card {
  margin-bottom: 1vw;
  display: flex;
}

.search-condition-card  .el-form-item{
  width: 20vw;
  margin: 0;
}
</style>
